import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Grid } from '@alifd/next';
import TpsSplineChart from '../TpsSplineChart'
import StatsBlock from '../StatsBlock'
import UpdatedStatsBlock from '../UpdatedStatsBlock'
import { 
  ApiOfStatGatewayCount, 
  ApiOfStatResourceCount, 
  ApiOfStatMetricWorkCount, 
  ApiOfStatPolicyCount,
  ApiOfStatActiveResourceCount, 
  ApiOfStatPolicyAlarmCount,
  ApiOfStatSubsystemAlarmCount,
} from '#/utils/statisticApiDefine'
import { ApiOfTpsEndpoint } from '#/utils/metricApiDefine'

const { Row, Col } = Grid;
const activeResourceCountIcon = require('./images/repo.png');
const activeMetircCountIcon = require('./images/count.png');
const policyAlarmCountIcon = require('./images/builder.png');
const subsystemAlarmCountIcon = require('./images/count.png');

export default class SystemState extends Component {
  static displayName = 'SystemState';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <Row gutter="20">
        <Col l="12">
          <IceContainer>
            <h4 style={styles.cardTitle}>TPS</h4>
            <TpsSplineChart />
          </IceContainer>
        </Col>
        <Col l="12">
          <IceContainer>
            <h4 style={styles.cardTitle}>系统数据</h4>
            <Row wrap gutter="10">
              <Col>
                <StatsBlock label="网关数" color="#5e83fb" api= {ApiOfStatGatewayCount} />
              </Col>
              <Col>
                <StatsBlock label="资源数" color="#f7da47" api= {ApiOfStatResourceCount} />
              </Col>
              <Col>
                <StatsBlock label="点位数" color="#ee6f6d" api= {ApiOfStatMetricWorkCount} />
              </Col>
              <Col>
                <StatsBlock label="策略数" color="#ee6f6d" api= {ApiOfStatPolicyCount} />
              </Col>
            </Row>
          </IceContainer>
          <IceContainer>
            <h4 style={styles.cardTitle}>今日数据</h4>
            <Row wrap gutter="10">            
              <Col>
                <UpdatedStatsBlock label="实时点位量" image={activeMetircCountIcon} api={ApiOfTpsEndpoint} valueIndex="total" interval="10000" default="0" />
              </Col>
              <Col>
                <UpdatedStatsBlock label="活跃资源数" image={activeResourceCountIcon} api={ApiOfStatActiveResourceCount}  interval="30000"/>
              </Col>
              <Col>
                <UpdatedStatsBlock label="策略报警量" image={policyAlarmCountIcon} api={ApiOfStatPolicyAlarmCount} interval="10000" />
              </Col>
              <Col>
                <UpdatedStatsBlock label="子系统报警量" image={subsystemAlarmCountIcon} api={ApiOfStatSubsystemAlarmCount} interval="1000" />
              </Col>
            </Row>
          </IceContainer>
        </Col>
      </Row>
    );
  }

  shouldComponentUpdate(nextProps, nextState) {
    return false;
  }
}


const styles = {
  cardTitle: {
    margin: '0 0 20px',
    fontSize: '18px',
    paddingBottom: '15px',
    fontWeight: 'bold',
    borderBottom: '1px solid #eee',
  },
  totalCard: {
    maxWidth: '160px',
    padding: '10px',
    borderRadius: '4px',
    color: '#fff',
  },
  todayCard: {
    display: 'flex',
    alignItems: 'center',
  },
  todayCardIcon: {
    width: '36px',
    height: '36px',
    marginRight: '8px',
  },
  label: {
    height: '14px',
    lineHeight: '14px',
    marginBottom: '8px',
  },
  value: {
    height: '28px',
    lineHeight: '28px',
    fontSize: '28px',
    fontWeight: '500',
  },
};
